<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer">
    <title>Title</title>
</head>
<body>
<div>
    <div><button class="input-container">
        上传头像
        <input accept="image/gif,image/jpeg,image/png" class="file-input" id="fileInput" type="file" />
    </button>
        <button class="save-btn"  onclick="downLoad()">保存图片</button>

    </div>

    <canvas id="canvas" class="canvas"></canvas>
</div>
<script>
    const options = {
        avatarImgX: 0,
        avatarImgY: 0,
        avatarX: 10,
        avatarY: 10,
        avatarWidth: 200,
        avatarHeight: 200,
        radius: 5,

        guoqiRadius: 3,
        guoqiX: 0,
        guoqiY: 0,
        guoqiWidth: 50,
        guoqiHeight: 33,
        guoqi: ""
    }
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const inputUpload = document.getElementById('fileInput');

    // onload
    window.onload = function() {
        inputUpload.onchange = function uploadAvatar() {
            const file = this.files[0];
            if(file) {
                const fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function () {
                    function cb() {
                        const param = {
                            sx: options.guoqiX,
                            sy: options.guoqiY,
                            x:options.radius * 2,
                            y:options.radius * 2,
                            width: options.guoqiWidth,
                            height: options.guoqiHeight
                        }
                        drawAvatar(options.guoqi,null, param.sx,param.sy,param.x,param.y,param.width,param.height, options.guoqiRadius)
                    }
                    drawAvatar(this.result,cb,options.avatarImgX,options.avatarImgY,options.avatarX,options.avatarY,options.avatarWidth,options.avatarHeight);
                }
            }
        };

    }

    // 绘制图片
    function drawAvatar(imgSrc,cb, ...args) {
        let img = new Image();
        img.src = imgSrc;
        img.onload = function () {
            args.splice(2, 0, img.width,img.height);
            if(args[6] === options.avatarWidth) {
                args[7] = parseInt(args[6] / (img.width / img.height));
                canvas.width = args[6] + 20;
                canvas.height = args[7] + 20;
                inputUpload.value = '';
            }
            const r = args[8] || options.radius, x = args[4], y = args[5], w = args[6], h=args[7];
            ctx.drawImage(img, ...args);
            drawRadius(x, y, w, h, r);
            typeof cb === 'function' && cb();
        }

    }
    // 绘制图片圆角
    function drawRadius(x,y,w,h,r) {
        ctx.beginPath();
        ctx.strokeStyle='white';
        ctx.fillStyle ='white'
        ctx.lineWidth= r;
        console.log(ctx.lineWidth);
        ctx.moveTo(x+r, y);
        ctx.arcTo(x+w, y, x+w, y+h, r);
        ctx.arcTo(x+w, y+h, x, y+h, r);
        ctx.arcTo(x, y+h, x, y, r);
        ctx.arcTo(x, y, x+w, y, r);
        ctx.stroke();
        ctx.closePath();
    }
    // 保存成png格式的图片
    function saveAsPNG() {
        return canvas.toDataURL("image/png");
    }
    function downLoad(url){
        let oA = document.createElement("a");
        oA.download = 'avatar';
        oA.href = saveAsPNG();
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
    }

</script>
</body>
</html>